<template>
  <div v-if="showSearch" class="addressSearch">
    <div class="search-view">
      <div class="search-box">
        <div class="search-box-input">
          <i class="fa fa-search"></i>
          <input
            type="text"
            placeholder="请输入小区/写字楼/学校等"
            v-model="search_address"
            v-focus
          />
        </div>
        <!-- 取消按钮 -->
        <button @click="$emit('close')" class="search-box-btn">取消</button>
      </div>
      <ul class="search-list">
        <li
          v-for="(list, idx) in areaList"
          :key="idx"
          class="search-row"
          @click="selectAddress(list)"
        >
          <p class="searc-row-title">{{ list.name }}</p>
          <p class="searc-row-location">
            {{ list.district }}{{ list.address }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { debounce } from "../../utils/debounce";
export default {
  name: "AddressSearch",
  props: {
    showSearch: Boolean,
    addressInfo: Object,
  },
  data() {
    return {
      search_address: "",
      areaList: [],
    };
  },
  computed: {
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      );
    },
  },
  methods: {
    //  IPO 搜索
    searchPlace(val) {
      // console.log(this.city);
      AMap.plugin("AMap.Autocomplete", () => {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: this.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(val, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
          // console.log(result);
          this.areaList = result.tips;
        });
      });
    },
    // 点击每个搜索条目的事件
    selectAddress(list) {
      // console.log(list);
      this.addressInfo.address = list.name + list.district + list.address;
      // 关闭搜索地址这一页
      this.$emit("close");
    },
  },
  watch: {
    search_address: debounce(function (val) {
      this.searchPlace(val);
    }, 1000),
  },
};
</script>

<style scoped>
.addressSearch {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 45px;
}
.search-view {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background-color: #fff;
}
.search-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.133333vw 3.866667vw 1.866667vw;
}
.search-box-input {
  flex: 1;
  border: 1px solid #ddd;
  outline: 0;
  color: #999;
  height: 7.466667vw;
  margin-right: 2.666667vw;
  border-radius: 0.533333vw;
  background: #f5f5f5;
  padding: 0 2.133333vw;
  display: flex;
  align-items: center;
}
.search-box-input > input {
  margin-left: 2vw;
  width: 90%;
  background: none;
}
input,
button {
  outline: none;
  border: none;
}
.search-box-btn {
  color: #333;
  border-radius: 0.533333vw;
  width: 14.8vw;
  height: 7.466667vw;
  font-size: 0.9rem;
  white-space: nowrap;
}

.search-list {
  padding-left: 4vw;
}
.search-row {
  border-bottom: 0.266667vw solid #eee;
  padding: 2.533333vw 0 3.333333vw;
  line-height: 1.2;
}
.search-row-title {
  color: #333;
  font-size: 1rem;
}
.search-row-location {
  color: #999;
  font-size: 0.866rem;
}
</style>
